<template>
  <el-dialog
    title="上报学业问题"
    v-model="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    class="custom-dialog"
  >
    <div class="report-content">
      <div class="info-item">
        <span class="label">学生姓名：</span>
        <span class="value">{{ student.name }}</span>
      </div>
      <div class="info-item">
        <span class="label">学业问题：</span>
        <span class="value warning-text">{{ student.issue }}</span>
      </div>
      <div class="info-item">
        <span class="label">上报级别：</span>
        <el-select v-model="reportLevel" placeholder="请选择上报级别" class="report-select">
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="info-item">
        <span class="label">上报部门：</span>
        <el-select v-model="reportDepartment" placeholder="请选择上报部门" class="report-select">
          <el-option
            v-for="item in departmentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="info-item">
        <span class="label">处理建议：</span>
        <el-select v-model="suggestion" placeholder="请选择处理建议" class="report-select">
          <el-option
            v-for="item in suggestionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="info-item">
        <span class="label">问题描述：</span>
        <el-input
          v-model="reportDescription"
          type="textarea"
          :rows="4"
          placeholder="请输入详细问题描述"
          class="report-textarea"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定上报</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineExpose } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  student: {
    type: Object,
    required: true
  }
});

const dialogVisible = ref(false);
const reportLevel = ref('');
const reportDepartment = ref('');
const suggestion = ref('');
const reportDescription = ref('');

const levelOptions = [
  { value: '1', label: '一般' },
  { value: '2', label: '重要' },
  { value: '3', label: '紧急' }
];

const departmentOptions = [
  { value: '1', label: '教务处' },
  { value: '2', label: '学院领导' },
  { value: '3', label: '学生处' },
  { value: '4', label: '教学督导组' }
];

const suggestionOptions = [
  { value: '1', label: '建议休学' },
  { value: '2', label: '建议降级' },
  { value: '3', label: '建议退学' },
  { value: '4', label: '建议转专业' },
  { value: '5', label: '其他' }
];

const handleSubmit = () => {
  if (!reportLevel.value) {
    ElMessage.warning('请选择上报级别');
    return;
  }
  if (!reportDepartment.value) {
    ElMessage.warning('请选择上报部门');
    return;
  }
  if (!suggestion.value) {
    ElMessage.warning('请选择处理建议');
    return;
  }
  if (!reportDescription.value) {
    ElMessage.warning('请输入问题描述');
    return;
  }
  
  ElMessage.success('上报成功');
  dialogVisible.value = false;
  reportLevel.value = '';
  reportDepartment.value = '';
  suggestion.value = '';
  reportDescription.value = '';
};

const show = () => {
  dialogVisible.value = true;
};

defineExpose({
  show
});
</script>

<style lang="less" scoped>
.custom-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    margin: 0;
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  :deep(.el-dialog__footer) {
    border-top: 1px solid #ebeef5;
    padding: 15px 20px;
  }
}

.report-content {
  .info-item {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    
    .label {
      width: 100px;
      color: #606266;
      font-weight: 500;
      line-height: 32px;
    }
    
    .value {
      flex: 1;
      color: #333;
      line-height: 32px;
      
      &.warning-text {
        color: #f56c6c;
        font-weight: 500;
      }
    }
    
    .report-select {
      width: 100%;
    }
    
    .report-textarea {
      width: 100%;
    }
  }
}
</style> 